<template>
  <div :class="`right_side_drawer ${isOpen ? 'open' : 'close'}`">
    <div class="icon_switch" id="switch" @click="changeIsOpen">
      <span class="title">填报说明</span>
    </div>
    <div class="menu_detail">
      <h3>注：</h3>
      <ol>
        <li>集团内部审计领导机构在“党委（党组）”、“董事会”及“总经理办公会”中选填，设立党委（党组）审计领导机构的请标明。</li>
        <li>集团内部审计部门设置在“单独设置”、“与其他部门合署办公”、“未设置”中选填，如合署办公则需标明具体部门名称。</li>
        <li>审计信息化系统建设应用情况在“未建设”“正在筹建”、“已建成并应用于审计管理”、“已应用大数据审计”中选填。</li>
        <li>全集团审计资产金额和子企业数量，同一审计对象仅统计一次。</li>
        <li> 审计发现问题第16列-51列指二级及以上审计机构开展项目中发现的问题，同一个问题不重复填报，境外审计发现的问题均按境外问题统计。</li>
        <li>挽回损失包括：追缴收回资金、工程审减金额、节约开支（成本）、清退不当得利等。</li>
        <li>审计整改问题与审计发现问题数据口径应保持一致，统计范围为当年度内部审计发现问题，整改率=问题整改数/全部发现问题数。</li>
      </ol>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
    }
  },
  methods: {
    changeIsOpen() {
      this.isOpen = !this.isOpen
    },
  },
}
</script>

<style lang="less" scoped>
.right_side_drawer {
  height: 62%;
  width: 450px;
  position: fixed;
  right: 0;
  top: 30%;
  padding: 10px 0px 10px 10px;
  display: flex;
  z-index: 100;
  transform: translateX(385px);
  overflow-y: scroll;
  pointer-events: none;
}
.right_side_drawer>div{
   pointer-events:auto;
}
.icon_switch {
  width: 55px;
  height: 125px;
  writing-mode: vertical-lr;
  text-align: center;
  background-color: rgb(57, 86, 166);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  pointer-events:auto;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  .title {
    &::before {
      content: '*';
      color: red;
      display: inline-block;
      margin-bottom: 5px;
    }
  }
}

.menu_detail {
  width: calc(100% - 60px);
  height: 100%;
  background-color: rgb(243, 246, 255);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  padding: 30px 15px;
  box-sizing: border-box;
  h3 {
    color: red;
  }
  ol {
    color: red;
    li {
      margin-top: 10px;
    }
  }
}

.open {
  transform: translateX(10px);
  transition: transform 0.3s linear;
}

.close {
  transform: translateX(385px);
  transition: transform 0.3s linear;
}
</style>